<template>
    <div :id="id" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5>新增元素</h5>
                </div>
                <div class="modal-body">
                <form :name="id + 'form'">
                    <div v-for="(v, k) in list" :key="k" class="form-group">
                        <label :for="k">{{v[0]}}</label>
                        <input v-if="id == 'add'" type="text" :name="k" :id="k" class="form-control">
                        <input v-if="id == 'edit'" type="text" :name="k" :id="k" class="form-control" :value="edit[k]">
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button v-if="id == 'add'" type="button" class="btn btn-primary" @click="addData">提交</button>
                    <button v-if="id == 'edit'" type="button" class="btn btn-primary" @click="deleteData">删除</button>
                    <button v-if="id == 'edit'" type="button" class="btn btn-primary" @click="editData">修改</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    name: 'ljmodal',
    props: ['id', 'list', 'index', 'edit', 'all', 'indexKey'],
    methods: {
        decodeData (key) {
            var data = localStorage.getItem(key)

            if (data !== null) {
                return JSON.parse(data)
            } else {
                return false
            }
        },
        encodeData (data) {
            return JSON.stringify(data)
        },
        addData () {
            var data = $('form[name='+ this.id+'form]').serializeArray()
            var list = this.decodeData(this.index)
            var add = new Object;
            
            data.forEach(v => {
                add[v.name] = v.value
            });

            // 更新vuex
            this.$store.commit('addChild', {
                key: this.index,
                value: add
            })
            list.push(add)
            list = this.encodeData(list)
            this.toStore(list)
        },
        toStore (data) {
            localStorage.setItem(this.index, data)
            $('#' + this.id).modal('hide')
        },
        editData () {
            var data = $('form[name='+ this.id+'form]').serializeArray()

            var edit = new Object;
            data.forEach(v => {
                edit[v.name] = v.value
            });

            Object.assign(
                this.all[this.indexKey],
                edit
            )
            var list = this.encodeData(this.all)
            // 更新vuex
            this.$store.commit('changeValue', {
                key: this.index,
                value: this.all
            })
            this.toStore(list)
        },
        deleteData () {
            this.all.splice(this.indexKey, 1)
            // 更新vuex
            this.$store.commit('changeValue', {
                key: this.index,
                value: this.all
            })
            this.toStore(this.encodeData(this.all))
        }
    }
}
</script>

